import Sprite from '../base/sprite'

const screenWidth = window.innerWidth
const screenHeight = window.innerHeight

class backGround extends Sprite {
  constructor(aDefault = 'images/ball/bg2.png', aWidth = screenWidth, aHeight = screenHeight, uuid = null) {
    super(aDefault, aWidth, aHeight, 0, 0, 1, null, uuid)

    this.top = 0
  }

  render(ctx) {
    this.drawToCanvas(ctx)
  }
}

class startBackground extends backGround{
  constructor(){
    super('images/ball/startGame_bg2.png', screenWidth, screenHeight, "start_bg")
  }
}

class astraySingleBackground extends backGround{
  constructor(){
    super('images/astray/rank.png', screenWidth, screenHeight, "rank_bg")
  }
}

class loadingBackground extends backGround{
  constructor(){
    super('images/ball/loading3.gif', 60, 60)
  }
}

class swingBackground extends backGround{
  constructor(){
      super('images/swing/swing.png')
      this.left = 0
  }
  update(aDistance){
    this.left += aDistance
    if (this.left >= screenWidth) this.left = 0
  }
  render(ctx){

    ctx.drawImage0(
      this.img,
      screenWidth - this.left,
      0,
      screenWidth,
      screenHeight
    )

    ctx.drawImage0(
      this.img,
      - this.left,
      0,
      screenWidth,
      screenHeight
    )
  }
}

module.exports = {
  playing: backGround,
  starting: startBackground,
  loading: loadingBackground,
  swinging: swingBackground,
  astraySingle: astraySingleBackground
}
